<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Desenhar grade</title>
<style>
body {
	margin: 10px;
	padding: 0px;
}

canvas {
	border: 1px solid #9C9898;
}
</style>
<script type="text/javascript" src="scripts/kinetic.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>

</head>
<body>
	<div id="container"></div>
	<button onclick="adicionarLinha();">Adicionar linha</button>
	<button onclick="adicionarColuna();">Adicionar coluna</button>
	<br />
	<script>
		var stage;
		var layer;
		var linhas = new Array();
		var colunas = new Array();
		var rect;

		function adicionarColuna() {
			var newLine = new Kinetic.Line({
				points : [ 300, 100, 300, 500 ],
				stroke : "red",
				strokeWidth : 2,
				draggable : true,
				dragBoundFunc : function(pos) {
					return {
						x : pos.x < -200 ? -200 : (pos.x > 200 ? 200 : pos.x),
						y : 0
					};
				}
			});

			newLine.on("mouseover", function() {
				document.body.style.cursor = "ew-resize";
			});
			newLine.on("mouseout", function() {
				document.body.style.cursor = "default";
			});
			colunas.push(newLine);

			layer.add(newLine);

			stage.add(layer);
		}

		function adicionarLinha() {
			var newLine = new Kinetic.Line({
				points : [ 100, 300, 500, 300 ],
				stroke : "red",
				strokeWidth : 2,
				draggable : true,
				dragBoundFunc : function(pos) {
					return {
						x : 0,
						y : pos.y < -200 ? -200 : (pos.y > 200 ? 200 : pos.y)
					};
				}
			});

			newLine.on("mouseover", function() {
				document.body.style.cursor = "ns-resize";
			});
			newLine.on("mouseout", function() {
				document.body.style.cursor = "default";
			});
			linhas.push(newLine);

			layer.add(newLine);

			stage.add(layer);
		}

		window.onload = function() {

			stage = new Kinetic.Stage({
				container : 'container',
				width : 800,
				height : 600
			});

			layer = new Kinetic.Layer();

			rect = new Kinetic.Rect({
				x : 100,
				y : 100,
				name : "mainRect",
				width : 400,
				height : 400,
				stroke : 'green',
				strokeWidth : 3,
			});

			layer.add(rect);

			stage.add(layer);

		}
	</script>
	<br />

</body>
</html>